<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
   <script type="text/javascript" src="./js/xcity.js"></script>
  <body>
    <div class="x-body layui-anim layui-anim-up">
        <form class="layui-form" id="formTest" lay-filter="formTest">
         
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  <span class="x-red">*</span>水库名称：
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="" name="reservoirName" required="" lay-verify=""
                  autocomplete="off" class="layui-input">
              </div>
                       
          </div>
         
          <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">
                  <span class="x-red">*</span>水库规模
              </label>
                <div class="layui-input-inline">
              <select name="size" lay-filter="area">
                <option value="小型">小型</option>
                <option value="中型">中型</option>
                <option value="大型">大型</option>
              </select>
            </div> 
          </div>
           <div class="layui-form-item">
              <label for="" class="layui-form-label">
                  <span class="x-red">*</span>水库类型
              </label>
                <div class="layui-input-inline">
              <select name="type" lay-filter="area">
                <option value="公益型">公益型</option>
                <option value="其他">其他</option>
               </select>
            </div> 
          </div>
          
           <div class="layui-form-item" id="x-city">
            <label class="layui-form-label">地区：</label>
            <div class="layui-input-inline">           
              <select name="province" lay-filter="province">
                <option value="">请选择省</option>
              </select>
            </div>
                                     
            <div class="layui-input-inline">                         
              <select name="city" lay-filter="city">
                <option value="">请选择市</option>
              </select>
            </div>
            
            <div class="layui-input-inline">
              <select name="country" lay-filter="area">
                <option value="">请选择县/区</option>
              </select>
            </div> 
         </div> 
   
   
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">
                  增加
              </button>
          </div>
      </form>
    </div>

    
    <form>
    </form>
    <script>
    var ctx="http://localhost:8080/hbsk/";
  
    

       layui.use(['form','code','layer'], function(){
        
            //$ = layui.jquery;
            var $=layui.$
           form = layui.form;
          var layer = layui.layer;
          layui.code();
          $('#x-city').xcity('广东','广州市','东山区');
       
          //自定义验证规则
         /*  form.verify({
            nikename: function(value){
              if(value.length < 5){
                return '昵称至少得5个字符啊';
              }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,repass: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
          });  */

          //监听提交
          form.on('submit(add)', function(data){
        	  debugger;
        	
            console.log("fff"+data.field);
            var formData={};
            formData=data.field;
            fd= JSON.stringify(formData);
            var person = {id: "1", size: "123"};
            var ddd=JSON.stringify(person);
            
            
            var json1 = {
                    "id": 2,
                    "size":6 
                    
                };
            var hh=JSON.stringify(json1)
     
            // 将json对象转换成json串
            person = JSON.stringify(person);
            $.ajax({
                type: "POST",
                url: 'http://localhost:8080/hbsk/reservoir/add',
                data: fd,
                contentType:'application/json;charset=UTF-8',
                dataType:'json',
                success: function (r) {
                     if (r.status == 200) {
                        var index = layer.load(1, {
                            shade: [0.1,'#fff'] //0.1透明度的白色背景
                        });
                        layer.msg(r.msg);
                         window.parent.reload(); 
                         var index = parent.layer.getFrameIndex(window.name);
                         //关闭当前frame
                         parent.layer.close(index);
                       
                    } else {
                        layer.msg(r.msg);
                    }
                },
            }); 
            //发异步，把数据提交给php
           /*  layer.alert("增加成功", {icon: 6},function () {
            	debugger;
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });  */
            return false;
          });
          
          
        }); 
       
       function add(){
    	   alert();
    	   var data1 = {"id":2, "size":8};
    	   $.ajax({
               type: "POST",
               url: "http://localhost:8080/hbsk/reservoir/add",
               data: JSON.stringify(data1),
               contentType: "application/json;charset=utf-8",
               success: function (result) {
                  alert("aa")
               },
               error: function () {
                   console.log("shibai")
               }
           });


       }
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
  </body>

</html>